<template>
  <div class="playlist">
    <!-- 头 -->
    <div class="playlist-center">
      <main-table>
        <div slot="left" class="header-left">
          <div class="left">{{ headerMessage }}</div>
          <div class="cateButton" @click="getCategory">
            <i>选择分类<em class="cate-icon"></em></i>
          </div>
        </div>
        <div slot="right">
          <a href="" class="right">热门</a>
        </div>
        <!-- 身体 -->
        <div slot="body" class="playlist-body">
          <!-- 盒子 -->
          <song-box
            v-for="(item, index) in playList"
            :key="item.id"
            :class="[index % 5 !== 0 ? 'active' : '']"
          >
            <el-image :src="item.coverImgUrl" alt="" lazy slot="img">
              <div slot="placeholder" class="image-slot">
                <div class="dot" v-loading="loading"></div>
              </div>
            </el-image>
            <a
              href="javascript:;"
              class="box-a"
              slot="a"
              @click="toDetail(item.id)"
            ></a>
            <span class="bottom-number" slot="number">{{
              item.playCount > 100000
                ? `${Math.floor(item.playCount / 10000)}万`
                : item.playCount
            }}</span>
            <a
              href="javascript:;"
              title="播放"
              class="bottom-play"
              slot="a"
              @click="playlistMusic(item.id)"
            ></a>
            <a
              href="javascript:;"
              slot="p"
              class="bottom-p"
              @click="toDetail(item.id)"
              >{{ item.name }}</a
            >

            <p class="bottom-p2">
              by<a href="javascript:;" class="bottom-p2-a">{{
                item.creator.nickname
              }}</a>
              <img
                v-if="item.creator.avatarDetail"
                :src="item.creator.avatarDetail.identityIconUrl"
                alt=""
              />
            </p>
          </song-box>
          <!-- 分页 -->
          <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            @current-change="handleCurrentChange"
            :current-page="queryInfo.offset / queryInfo.limit + 1"
            :page-size="queryInfo.limit"
          >
          </el-pagination>
        </div>
      </main-table>
    </div>

    <!-- 弹出框 -->
    <div class="playlist-cate" v-if="isShow">
      <div class="cate-header">
        <div class="all">
          <a href="javascript:;" @click="getAllList">全部风格</a>
        </div>
      </div>
      <div class="cate-body">
        <div class="cate-center" v-for="(item, index) in category" :key="index">
          <div class="center-left">
            {{ index }}
          </div>
          <div class="center-right">
            <a
              href="javascript:;"
              v-for="(item1, index1) in item"
              :key="index1"
              @click="changeCat(item1)"
              :class="[item1.name == headerMessage ? 'active-cate' : '']"
              >{{ item1.name }}</a
            >
          </div>
        </div>
      </div>
    </div>
    <!-- 详细评论 -->
    <!-- <all-commit></all-commit> -->
    <!-- 底部 -->
    <main-footer></main-footer>
  </div>
</template>

<script>
import {
  getPlaylist,
  getCategory,
  getrecommendTop,
  getSongURL
} from '@/api/api.js'

import mainTable from '../../components/common/mainTable.vue'
import SongBox from '../../components/common/songBox.vue'
import MainFooter from '../../components/common/mainFooter.vue'
// import AllCommit from './components/allCommit.vue';

export default {
  components: {
    mainTable,
    SongBox,
    MainFooter
    // AllCommit,
  },
  data() {
    return {
      loading: true,
      // 请求参数
      queryInfo: {
        // 分类
        cat: '',
        // 请求数量
        limit: 35,
        // 用于分页
        offset: 0
      },
      total: 0,
      playList: [],
      // 分类列表
      category: {},
      // 显示与否
      isShow: false,
      headerMessage: ''
    }
  },
  created() {
    this.url()
    this.getPlaylist()
  },
  methods: {
    url() {
      if (this.$route.query.name) {
        this.queryInfo.cat = decodeURI(this.$route.query.name)
      }
    },
    // 获取分类所有歌单
    async getPlaylist() {
      const res = await getPlaylist(this.queryInfo)
      console.log(res)
      this.total = res.total
      this.headerMessage = res.cat
      this.playList = res.playlists
      for (let item of this.playList) {
        item.coverImgUrl += '?param=140y140'
      }
    },
    // 页数改变
    handleCurrentChange(newOffset) {
      this.queryInfo.offset = (newOffset - 1) * this.queryInfo.limit
      this.getPlaylist()
    },
    // 获取分类
    async getCategory() {
      const res = await getCategory()
      console.log(res)
      // function Category() {
      //   this.categoryName = res.categories
      //   this.categoryItem = res.sub
      // }
      // this.category = new Category()
      // console.log(this.category);
      let category = {}
      for (let index in res.categories) {
        category[`${res.categories[index]}`] = []
        res.sub.forEach((item) => {
          if (item.category == index) {
            category[`${res.categories[index]}`].push(item)
          }
        })
      }
      this.category = category
      this.isShow = !this.isShow
      console.log(this.category)
    },
    // 播放音乐
    async playlistMusic(id) {
      let songList = []
      const {
        playlist: { trackIds: res }
      } = await getrecommendTop(id)
      let res1 = res.slice(0, 10)

      // 先得到id
      for (let item of res1) {
        const { data: res2 } = await getSongURL(item.id)

        songList.push(res2[0].url)
      }

      this.$store.commit('savaSongURL', [])
      this.$store.commit('savaSongURL', songList)
    },
    // 点击分类
    changeCat(item) {
      this.queryInfo.cat = item.name
      this.getPlaylist()
      this.isShow = !this.isShow
    },
    getAllList() {
      this.queryInfo.cat = '全部'
      this.getPlaylist()
      this.isShow = !this.isShow
    },
    // 跳转歌单详情
    toDetail(id) {
      this.$router.push({
        path: `/playlist`,
        query: {
          id
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.image-slot {
  width: 140px;
  height: 140px;
  .dot {
    width: 100%;
    height: 100%;
  }
}
// .el-pager .active {
//   background-color: #da0e16;
// }

// .el-pagination.is-background .el-pager li:not(.disabled).active {
//     background-color: #da0e16 !important;
//     color: #FFF;
// }

.active {
  padding-left: 20px;
}
.active-cate {
  background: #a7a7a7;
}
.playlist {
  width: 100%;
  position: relative;
  .playlist-center {
    width: 980px;
    margin: 0 auto;
    padding: 40px;
    background: white;
    border: 1px solid #d3d3d3;
    border-width: 0 1px;

    .header-left {
      display: flex;
      width: 150px;
      height: 33px;
      justify-content: space-between;
      margin-bottom: 10px;
      .cateButton {
        width: 90px;
        color: #333;
        background: url('https://s2.music.126.net/style/web2/img/button2.png?3b1af8779cab6a84196c071d5a3f4343')
          no-repeat 0 9999px;

        background-position: right -100px;
        i {
          display: inline-block;
          width: 88px;
          text-align: center;
          line-height: 33px;
          color: #0c73cd;
          height: 100%;
          background: url('https://s2.music.126.net/style/web2/img/button2.png?3b1af8779cab6a84196c071d5a3f4343')
            no-repeat 0 9999px;
          background-position: 0 -59px;
          .cate-icon {
            width: 8px;
            height: 5px;
            display: inline-block;
            margin-left: 3px;
            margin-bottom: 2px;
            background: url('https://s2.music.126.net/style/web2/img/icon.png?678c47fad4a114dea212a64e017e34ba');
            background-position: -70px -543px;
          }
          &:hover {
            background-position: 0 -141px;
            cursor: pointer;
          }
        }
      }
    }
  }
  .left {
    font-family: 'Microsoft Yahei', Arial, Helvetica, sans-serif;
    font-size: 24px;
    // line-height: 33px;
  }
  .right {
    display: block;
    width: 46px;
    height: 29px;
    color: white;
    background: #b70a0b;
    text-align: center;
    line-height: 29px;
    border-radius: 3px;
    margin-bottom: 10px;
    margin-right: -8px;
    &:hover {
      cursor: pointer;
      text-decoration: underline;
    }
  }

  .bottom-p {
    text-decoration: none;
    color: #000;
    display: block;
    width: 140px;
    height: 19px;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: normal;
  }
  .bottom-p2 {
    font-size: 12px;
    color: #999;
    .bottom-p2-a {
      text-decoration: none;
      margin-left: 2px;
      color: #666 !important;
    }
    img {
      width: 13px;
      height: 13px;
      vertical-align: middle;
      margin-left: 5px;
    }
  }
}
.playlist-body {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}
.playlist-cate {
  box-shadow: 0 2px 8px rgb(0 0 0 / 80%);
  position: absolute;
  z-index: 30;
  top: 72px;
  left: 197px;
  width: 700px;
  background: #ffffff;
  .cate-header {
    height: 55px;
    width: 100%;
    border-bottom: 1px solid #e6e6e6;
    display: flex;
    align-items: center;
    padding-left: 20px;
    .all {
      width: 75px;
      height: 26px;
      text-align: center;
      overflow: hidden;

      background: url('https://s2.music.126.net/style/web2/img/button.png?101e8e2c3c7f5fc936897c014935d804')
        no-repeat 0 9999px;
      background-position: 0 -64px;
      &:hover {
        cursor: pointer;
      }
      a {
        text-decoration: none;

        line-height: 26px;
        color: #000;
        &:hover {
          text-decoration: underline;
        }
      }
    }
  }
  .cate-body {
    width: 100%;
    .cate-center {
      width: 100%;
      display: flex;
      justify-content: flex-start;
      .center-left {
        width: 95px;
        font-weight: bold;
        font-size: 15px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .center-right {
        width: 605px;
        display: flex;
        flex-flow: wrap;
        padding: 16px 16px 0 15px;
        margin-bottom: 16px;
        a {
          color: #333;
          display: block;
          // width: 35px ;
          padding-right: 10px;
          height: 12px;
          line-height: 12px;
          line-height: 12px;
          border-right: 1px solid #d8d8d8;
          text-decoration: none;
          margin: 15px 0 0 15px;

          &:hover {
            text-decoration: underline;
          }
        }
      }
    }
  }
}
</style>
